import React, { Component } from 'react';
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
class Uploadlist extends Component {
    state = {
        previewVisible: false,
        previewImage: '',
        previewTitle: '',
        fileList: [
        //   {
        //     uid: '-1',
        //     name: 'image.png',
        //     status: 'done',
        //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   },
        //   {
        //     uid: '-2',
        //     name: 'image.png',
        //     status: 'done',
        //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   },
        //   {
        //     uid: '-3',
        //     name: 'image.png',
        //     status: 'done',
        //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   },
        //   {
        //     uid: '-4',
        //     name: 'image.png',
        //     status: 'done',
        //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   },
        //   {
        //     uid: '-xxx',
        //     percent: 50,
        //     name: 'image.png',
        //     status: 'uploading',
        //     url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   },
        //   {
        //     uid: '-5',
        //     name: 'image.png',
        //     status: 'error',
        //   },
        ],
        imgs:[
            // {
            //     url:'https://ftp.bmp.ovh/imgs/2021/06/db58c5cb3ac6e7f2.png'
            // },
            // {
            //     url:'https://ftp.bmp.ovh/imgs/2021/06/3cc7d39b04b378e2.jpg'
            // }
        ],
        imgurl:[]
      };
    
      handleCancel = () => this.setState({ previewVisible: false });
    
      handlePreview = async file => {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
    
        this.setState({
          previewImage: file.url || file.preview,
          previewVisible: true,
          previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
      };
    
      handleChange = ({ fileList }) => {
          this.setState({ fileList })
          console.log(fileList);
          let imgs =[]
          let imgs2 =[]
          fileList.forEach(el=>{
              console.log(el.response);
              imgs.push(el.response)
              // forEach(el2=>{
              //   imgs2.push(el2.url)
              // })
          })
            this.setState(()=>{
                return {
                    imgs,
                    // imgurl:imgs2
                }
            },()=>{
                console.log(this.state.imgs);
                localStorage.setItem("imglist",JSON.stringify(imgs))
            })
        };
    componentDidMount(){
        if(localStorage.getItem('imglist')){
            let imgs=JSON.parse(localStorage.getItem('imglist'))
            this.setState(()=>{
                return {
                    imgs
                }
            })
            // let imgurl2 = []
            // imgs.forEach(el=>{
            //     imgurl2.push(el.url)
            // })
            // this.setState(()=>{
            //     return {
            //         imgurl:imgurl2
            //     }
            // },()=>{
            //     console.log(this.state.imgurl);
            // })
             }
    }
      render() {
        const { previewVisible, previewImage, fileList, previewTitle,imgs,imgurl} = this.state;
        const uploadButton = (
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
          </div>
        );
        console.log(imgs);
        console.log(imgurl);
        // let imgurl2 = []
        // imgs.forEach(el=>{
        //     imgurl2.push(el.url)
        // })
        // this.setState(()=>{
        //     return {
        //         imgurl:imgurl2
        //     }
        // })
        // localStorage.setItem("imglist",['https://ftp.bmp.ovh/imgs/2021/06/db58c5cb3ac6e7f2.png'])
        return (
          <>
            <Upload
              action="/shangchuang"
              listType="picture-card"
              fileList={fileList}
              onPreview={this.handlePreview}
              onChange={this.handleChange}
            >
              {fileList.length >= 1 ? null : uploadButton}
              {uploadButton.length==0?uploadButton:null}
            </Upload>
            <Modal
              visible={previewVisible}
              title={previewTitle}
              footer={null}
              onCancel={this.handleCancel}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <div className="loadedlist">
                {
                    imgurl.map(el=>{      
                        return (
                        <img src={el} key={el} alt="" width="102"height="102"style={{border:'1px solid red'}}/>
                        )
                    })
                }
                {/* <img src=' https://ftp.bmp.ovh/imgs/2021/06/db58c5cb3ac6e7f2.png'alt="" width="102"height="102"style={{border:'1px solid red'}}/> */}
            </div>
          </>
        );
      }
}

export default Uploadlist;
